import React, { Fragment } from "react"
import houtui from "./img/后退.png"
import Mycss from "./style/index.module.css"
class PersonalFM extends React.Component {
    constructor() {
        super()
        this.state = {
            sirenFM: [],
            suijigequ: {},
            picUrl: "",
            albumName: "",
            albumlength: "",
            albumSingers: "",
            albumSingers2: "",
            songid: "",
            songurl: ""
        }
    }
    backbackback(){
        this.props.history.push({pathname:"/gen/My"})
    }
    componentWillMount() {
        fetch("http://106.12.79.128:666/personal_fm", {
            credentials: 'include'
        })
            .then(body => body.json())
            .then(res => {
                console.log(res)
                this.setState({
                    sirenFM: res.data
                })
                const num = Math.floor(Math.random() * (this.state.sirenFM.length))
                this.setState({
                    suijigequ: this.state.sirenFM[num]
                })
                this.setState({
                    picUrl: this.state.suijigequ.album.blurPicUrl,
                    albumName: this.state.suijigequ.album.name,
                    albumlength: this.state.suijigequ.artists.length,
                    albumSingers: this.state.suijigequ.artists[0].name,
                    songid: this.state.suijigequ.id
                })
                if (this.state.albumlength === 2) {
                    this.setState({
                        albumSingers2: this.state.suijigequ.artists[1].name
                    })
                }
                console.log(this.state.songid)
                fetch(`http://106.12.79.128:666/song/url?id=${this.state.songid}`, {
                    credentials: 'include'
                })
                    .then(body => body.json())
                    .then(res => {
                        this.setState({
                            songurl: res.data[0].url
                        })
                    })
                    console.log(this.state.songurl)
            })
    }
    render() {
        return (
            <Fragment>
                <div className={Mycss.FMALL}>
                    <div className={Mycss.fmTop}>
                        <img src={houtui} alt="" className={Mycss.backicon} onClick={this.backbackback.bind(this)}/><div className={Mycss.sirenfm}>私人FM</div>
                    </div>
                    <div className={Mycss.albumPic}><img src={this.state.picUrl} alt="" className={Mycss.albumPic1} /></div>
                    <div className={Mycss.albumName}>{this.state.albumName}</div>
                    <div className={Mycss.albumSingers}>{this.state.albumlength === 1 ? `${this.state.albumSingers}` : `${this.state.albumSingers}/${this.state.albumSingers2}`}</div>
                    <div className={Mycss.audioss}><audio src={this.state.songurl} controls className={Mycss.audiosss}></audio></div>
                </div>
            </Fragment>
        )
    }
}
export default PersonalFM